<!-- @format -->
<script setup>
	import { ref, watch } from 'vue'
	// 导入全局样式
	import './assets/style.css'
	// 导入 3 个子组件
	import TodoHeader from './components/TodoHeader.vue'
	import TodoMain from './components/TodoMain.vue'
	import TodoFooter from './components/TodoFooter.vue'

	// 本地存储的键名
	const TODO_LIST_KEY = 'todo-list-key'

	// 代办任务列表
	const todoList = ref(
		// 从本地进行取值，并反序列化；若取到了就用本地的值，否则用默认值
		JSON.parse(localStorage.getItem(TODO_LIST_KEY)) || [
			{ id: 321, name: '学Vue组件通信', finished: false },
			{ id: 127, name: '打王者', finished: true },
			{ id: 666, name: '跑步1小时', finished: false }
		]
	)

	// 添加
	const addTodo = (name) => {
		todoList.value.push({
			id: Date.now(),
			name,
			finished: false
		})
	}

	// 删除
	const delTodo = (i) => {
		// 确认提示
		if (window.confirm('确认删除么?')) {
			// 调用 splice(i, 1) 从当前点击的位置删一个
			todoList.value.splice(i, 1)
		}
	}

	// 清除所有已完成
	const clearTodo = () => {
		// 调用数组的 filter(), 筛选出所有 finished 为 false
		// 再重新赋值给 todoList.value
		todoList.value = todoList.value.filter((item) => !item.finished)
	}

	// 监视数据的变化：这里有 3 种操作会触发 todoList 的变化
	// 分别是：添加、删除、切换选中状态
	watch(
		todoList,
		(newVal) => {
			// console.log('todoList变了', newVal)
			// 把 todoList 最新的值序列化之后存储到本地
			localStorage.setItem(TODO_LIST_KEY, JSON.stringify(newVal))
		},
		{
			// 开启深度监视，当对象中的 finished 属性变化了，也要能监视到 todoList 的变化
			deep: true
		}
	)
</script>

<template>
	<div class="todoapp">
		<!-- 头部 -->
		<todo-header @add-todo="addTodo" />
		<!-- 主体 -->
		<todo-main
			:todos="todoList"
			@del-todo="delTodo" />
		<!-- 底部 -->
		<todo-footer
			:todoList="todoList"
			@clear-todo="clearTodo" />
	</div>
</template>

<style scoped></style>
